<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <style>
    path {
      fill: #e3e3e3;
      stroke-width: 1px;
      stroke: #666;
    }
  </style>
</head>
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<script src="../build/flubber.min.js"></script>
<script>
var svg = d3.select("svg"),
    path = svg.append("path");

d3.json("lower48.topo.json", function(err, topo) {
  var states = topojson
    .feature(topo, topo.objects.states)
    .features.map(d => d.geometry.coordinates[0]);

  d3.shuffle(states);

  draw(0);

  function draw(i) {
    // Go from start -> circle -> next
    var start = states[0],
        next = states[1],
        r = 70 + i % 3 * 70,
        x = 240 + i % 2 * 480,
        y = 250;

    var outward = flubber.toCircle(start, x, y, r, { maxSegmentLength: 20 }),
        inward = flubber.fromCircle(x, y, r, next, { maxSegmentLength: 20 });

    states.push(states.shift());

    path
      .attr("d", "M" + start.join("L") + "Z")
      .transition()
      .delay(600)
      .duration(2000)
      .attrTween("d", function() { return outward; })
      .transition()
      .delay(600)
      .attrTween("d", function() { return inward; })
      .on("end", function() { draw(i + 1); });

  }
});
</script>
